<template>
    <div class="no-card">
    	<i class="icon-card"></i>
    	<p>没有可用的卡</p>
    </div>
    <ul class="n-list">
    	<li><a href="#">添加套餐卡</a></li>
    	<li><a href="#">查看不可用卡</a></li>    	
    </ul>
    <div class="nc-ban">
    	<img src="../../assets/images/ban.png">
    </div>
</template>	

<style lang="scss" scoped>
	@import '../../assets/css/_functions.scss';
	@import '../../assets/css/_variables.scss';

	.no-card{
		margin-top: rem(96);
		text-align: center;
		.icon-card{
			width: rem(62);
			height: rem(48);
			background: url(../../assets/images/icon-card.png) no-repeat;
			background-size: rem(62) rem(48);
            background-position: 0 0;
            display: inline-block;
		}
		p{
			margin-top: rem(13); 
		}  
	}
	.n-list{
		background: $_fff;
		padding-left: rem(14);
		margin-top: rem(68);  
		li{
			height: rem(44);
			line-height: rem(44);
			border-bottom: 1px solid $_dedede;
			font-size: rem(14);
			position: relative;
			&:last-child{
				border-bottom: none;
			}
			&:after{
				position: absolute;
				content: "";
				width: rem(8);
				height: rem(8);
				border-top: rem(2) solid #c7c7c7;
				border-left: rem(2) solid #c7c7c7;
				top: 50%;
				right: 4%;
				transform: translate3d(-50%,-50%,0) rotate(-224deg);
				-ms-transform: translate3d(-50%,-50%,0) rotate(-224deg);	/* IE 9 */
				-webkit-transform: translate3d(-50%,-50%,0) rotate(-224deg);/* Safari and Chrome */
				-o-transform: translate3d(-50%,-50%,0) rotate(-224deg);/* Opera */
				-moz-transform: translate3d(-50%,-50%,0) rotate(-224deg);
			}  	
		}
		a{
			color: $_333;
			display: block;
		}		
	}
	.nc-ban{		
		margin: rem(20) 0 rem(105);
		padding: 0 rem(14) 0;
		img{
			width:100%;
			height: rem(120);
			border-top: 1px solid #c8c7cc;
			padding-top: rem(20); 
		} 
	}
	
</style>